<!doctype html public "-//W3C//DTD HTML 4.0 Frameset//EN""http://www.w3.org/TR/REC-html40/frameset.dtd">
<html>
<head>
<title>
 Overview
</title>
<link rel ="stylesheet" type="text/css" href="stylesheet.css" title="Style">
<script>
function asd() {
	
		parent.document.title="propertyBox.js Overview";
	
}
</script>
</head>
<body bgcolor="white" onload="asd();">

<!-- ========== START OF NAVBAR ========== -->
<a name="navbar_top"><!-- --></a>
<table border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td colspan=2 bgcolor="#EEEEFF" class="NavBarCell1">
<a name="navbar_top_firstrow"><!-- --></a>
<table border="0" cellpadding="0" cellspacing="3">
  <tr align="center" valign="top">
  
  
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-summary.html"><font class="NavBarFont1"><b>Overview</b></font></a>&nbsp;</td>
  <td bgcolor="#FFFFFF" class="NavBarCell1Rev">	&nbsp;<font class="NavBarFont1Rev"><b>File</b></font>&nbsp;</td>
  

  <td bgcolor="#FFFFFF" class="NavBarCell1"> 	<font class="NavBarFont1">Class</font>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-tree.html"><font class="NavBarFont1"><b>Tree</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="index-all.html"--><font class="NavBarFont1"><b>Index</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="help-doc.html"><font class="NavBarFont1"><b>Help</b></font></a>&nbsp;</td>
  </tr>
</table>
</td>
<td bgcolor="#EEEEFF" align="right" valign="top">
<em>
<b></b></em>
</td>
</tr>

<tr>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
&nbsp;PREV&nbsp;
&nbsp;NEXT</font></td>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
  <a href="index.html" target="_top"><b>FRAMES</b></a>  &nbsp;
&nbsp;<a href="overview-summary.html" target="_top"><b>NO FRAMES</b></a>
&nbsp;&nbsp;
<script>
  <!--
  if(window==top) {
    document.writeln('<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>');
  }
  //-->
</script>
<noscript>
<a href="allclasses-noframe.html" target=""><b>All Classes</b></a>
</noscript>
</font></td>
</tr>
</table>
<!-- =========== END OF NAVBAR =========== -->

<hr>
<center>
	
	   <h2>propertyBox.js</h2>
	
</center>

	


<h4>Summary</h4>
<p>
	
		No overview generated for 'propertyBox.js'<BR/><BR/>
	
</p>

<hr>


    <table border="1" cellpadding="3" cellspacing="0" width="100%">
    <tr bgcolor="#CCCCFF" class="TableHeadingColor">
    <td colspan=2><font size="+2">
    
        <b>Class Summary</b>
    
    </font></td>
    </tr>
    
    <tr bgcolor="white" class="TableRowColor">
    <td width="15%"><b><a href="propertyBox.html">propertyBox</a></b></td>
    <td>&nbsp;</td>
    </tr>
    
    </table>
    <hr/> 


<!-- ========== METHOD SUMMARY =========== -->

<!-- ========== END METHOD SUMMARY =========== -->


        <pre class="sourceview"><span class="comment">/**
 * The box where the properties of the elements that were put in the edition area are shown. 
 * It has tabs depending on the number of selected elements at one time. 
 * <span class="attrib">@author</span> Roosevelt de Lima Sardinha
 * <span class="attrib">@constructor</span>
 */</span>
<span class="reserved">function</span> propertyBox(id, properties){
    
	<span class="comment">/**
	 * The workspace this property box belongs to.
	 * <span class="attrib">@type</span> {Object}  
	 */</span>
	<span class="reserved">this</span>.workspace = properties.workspace;
    var thisObject = <span class="reserved">this</span>;
	
	<span class="comment">/**
	 * The unique id of the property box.
	 * <span class="attrib">@type</span> {String}
	 */</span>
	<span class="reserved">this</span>.id = id;
	
	<span class="comment">/**
	 * The object that contains the initial properties of the property box.
	 * <span class="attrib">@type</span> {Object} 
	 */</span>
	<span class="reserved">this</span>.properties = properties;
	
	<span class="comment">/**
	 * The path of the CSS stylesheet file.
	 * <span class="attrib">@type</span> {String}
	 */</span>
	<span class="reserved">this</span>.cssPath = <span class="reserved">this</span>.properties.cssPath ? <span class="reserved">this</span>.properties.cssPath : <span class="literal">"css/boxes/propertyBox.css"</span>;
	
	<span class="comment">/**
	 * The title of this property box.
 	 * <span class="attrib">@type</span> {String}
	 */</span>
	<span class="reserved">this</span>.title = <span class="reserved">this</span>.properties.title ? <span class="reserved">this</span>.properties.title: <span class="literal">"PropertyBox"</span>;
	
	<span class="comment">/**
	 * The left coordinate of the property box.
	 * <span class="attrib">@type</span> {Int}
	 */</span>	
	<span class="reserved">this</span>.left = <span class="reserved">this</span>.properties.left ? parseInt(<span class="reserved">this</span>.properties.left) : 0;
	
	<span class="comment">/**
	 * The top coordinate of the property box.
	 * <span class="attrib">@type</span> {Int}
	 */</span> 	
	<span class="reserved">this</span>.top = <span class="reserved">this</span>.properties.top ? parseInt(<span class="reserved">this</span>.properties.top) : 0;
	
	<span class="comment">/**
	 * The width of the property box.
	 * <span class="attrib">@type</span> {Int}
	 */</span>
	<span class="reserved">this</span>.width = <span class="reserved">this</span>.properties.width ? parseInt(<span class="reserved">this</span>.properties.width) : 100;
	
	<span class="comment">/**
	 * The height of the property box.
	 * <span class="attrib">@type</span> {Int}
	 */</span>	
	<span class="reserved">this</span>.height = <span class="reserved">this</span>.properties.height ? parseInt(<span class="reserved">this</span>.properties.height) : 100;
	
	<span class="comment">/** 
	 * The id of the DOM node that contains this property box.
	 * <span class="attrib">@type</span> {String}
	 */</span>
    <span class="reserved">this</span>.parentId = <span class="reserved">this</span>.properties.parent;
	
	<span class="comment">/**
	 * Determines if the property box has the focus of the keyboard.
	 * <span class="attrib">@type</span> {Boolean}
	 */</span>
	<span class="reserved">this</span>.hasFocus = false;
	
	<span class="comment">// Events</span>
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Defines what is going to be done when you drag the property box.
	 * <span class="attrib">@param</span> {Int} x The left coordinate of the property box while dragging.
	 * <span class="attrib">@param</span> {Int} y The top coordinate of the property box while dragging.
	 * <span class="attrib">@param</span> {Object} propertyBox The property box being dragged.
	 */</span>	
	<span class="reserved">this</span>.onDrag = <span class="reserved">function</span>(x, y, propertyBox){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Defines what is going to be done when you drop the property box.
	 * <span class="attrib">@param</span> {Int} x The left coordinate of the property box when dropped.
	 * <span class="attrib">@param</span> {Int} y The top coordinate of the property box when dropped.
	 * <span class="attrib">@param</span> {Object} propertyBox The property box being dropped.
	 */</span>	
	<span class="reserved">this</span>.onDrop = <span class="reserved">function</span>(x,y, propertyBox){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Defines what is going to be done when you start to resize the property box.
	 * <span class="attrib">@param</span> {Int} width The width of the property box when you start to resize.
	 * <span class="attrib">@param</span> {Int} height The height of the property box when you start to resize.
	 * <span class="attrib">@param</span> {Object} propertyBox The property box being resized.
	 */</span>	
	<span class="reserved">this</span>.onBeforeResize = <span class="reserved">function</span>(width, height, propertyBox){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Defines what is going to be done during resize.
	 * <span class="attrib">@param</span> {Int} width The width of the property box during resize.
	 * <span class="attrib">@param</span> {Int} height The height of the property box during resize.
	 * <span class="attrib">@param</span> {Object} propertyBox The property box being resized.
	 */</span>
	<span class="reserved">this</span>.onResize = <span class="reserved">function</span>(width, height, propertyBox){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Defines what is going to be done after resize.
	 * <span class="attrib">@param</span> {Int} width The width of the property box after resize.
	 * <span class="attrib">@param</span> {Int} height The height of the property box after resize.
	 * <span class="attrib">@param</span> {Object} propertyBox The property box resized.
	 */</span>	
	<span class="reserved">this</span>.onAfterResize = <span class="reserved">function</span>(width, height, propertyBox){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Defines what is going to be done when you remove this property box.
	 */</span>
	<span class="reserved">this</span>.onRemove = <span class="reserved">function</span>(){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Defines what is going to be done when you restore the size of this property box.
	 * <span class="attrib">@param</span> {Object} propertyBox The property box the size was restored.
	 */</span>	
	<span class="reserved">this</span>.onRestoreSize = <span class="reserved">function</span>(propertyBox){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Called when you add a new tab to the property box.
	 * <span class="attrib">@param</span> {String} title The title of the tab. 
	 * <span class="attrib">@param</span> {Int} position The position where the tab is being inserted.
	 * <span class="attrib">@param</span> {Object} propertyBox The property box where the tab was inserted.
	 */</span>
	<span class="reserved">this</span>.onAddTab = <span class="reserved">function</span>(title, position, propertyBox){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Called when a tab is removed.
	 * <span class="attrib">@param</span> {Int} position The position of the tab. 
	 * <span class="attrib">@param</span> {Object} propertyBox The property box from where the tab was removed.
	 */</span>
	<span class="reserved">this</span>.onRemoveTab = <span class="reserved">function</span>(position, propertyBox){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Defines what is going to be done when you add a property.
	 * <span class="attrib">@param</span> {Int} tabId The id of the tab received when it was added. 
	 * <span class="attrib">@param</span> {Int} row The row in the table inside the tab where the content is going to be inserted.
	 * <span class="attrib">@param</span> {Int} cell The cell in the table inside the tab where the content is going to be inserted.
	 * <span class="attrib">@param</span> {String} property The property of the EO to be changed by this field.
	 * <span class="attrib">@param</span> {String} inputType The type of input to be inserted. Eg.: Text, Color, FontColor
	 * <span class="attrib">@param</span> {Object} EO The EO that is going to have its property changed.
	 * <span class="attrib">@param</span> {Object} properties The properties you may use depending on the type of field of your choice. 
	 * <span class="attrib">@param</span> {Object} thisObject The property box the property is being added.
	 */</span>
	<span class="reserved">this</span>.onAddProperty = <span class="reserved">function</span>(tabId, row, cell, property, inputType, EO, properties, thisObject){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Called when removing all properties at once.
	 * <span class="attrib">@param</span> {Int} tabId The id of the tab given when it was created.
	 * <span class="attrib">@param</span> {Object} propertyBox The property box form where the properties where removed.
	 */</span>
	<span class="reserved">this</span>.onRemoveAllProperties = <span class="reserved">function</span>(tabId, propertyBox){};

    var parent = document.getElementById(<span class="reserved">this</span>.parentId);
    
    <span class="comment">//gets the initial size and position of the object</span>
    var iniLeft = parseInt(properties.left);
    var iniTop = parseInt(properties.top);
    var iniWidth = parseInt(properties.width);
    var iniHeight = parseInt(properties.height);
    
    <span class="comment">//code for the divs: background of the object and the div where the user works	</span>
    
    var propertyBoxBg = document.createElement(<span class="literal">'div'</span>);
    propertyBoxBg.id = <span class="reserved">this</span>.id + <span class="literal">'Bg'</span>;
    propertyBoxBg.className = <span class="literal">'property-box'</span>;
    propertyBoxBg.style.borderWidth = <span class="literal">'4px'</span>;
    propertyBoxBg.style.position = <span class="literal">'absolute'</span>;
    propertyBoxBg.style.left = <span class="reserved">this</span>.left + <span class="literal">'px'</span>;
    propertyBoxBg.style.top = <span class="reserved">this</span>.top + <span class="literal">'px'</span>;
    propertyBoxBg.style.width = <span class="reserved">this</span>.width + <span class="literal">'px'</span>;
    propertyBoxBg.style.height = <span class="reserved">this</span>.height + <span class="literal">'px'</span>;
    
    <span class="comment">//generates the property box</span>
    var propertyBox = document.createElement(<span class="literal">'div'</span>);
	<span class="comment">/**
	 * <span class="attrib">@ignore</span>
	 */</span>
    propertyBox.id = <span class="reserved">this</span>.id;
    propertyBox.style.position = <span class="literal">'absolute'</span>;
    propertyBox.style.left = <span class="reserved">this</span>.left + parseInt(propertyBoxBg.style.borderLeftWidth) + <span class="literal">'px'</span>;
    propertyBox.style.top = <span class="reserved">this</span>.top + parseInt(propertyBoxBg.style.borderTopWidth) + <span class="literal">'px'</span>;
    propertyBox.style.width = <span class="reserved">this</span>.width + <span class="literal">'px'</span>;
    propertyBox.style.height = <span class="reserved">this</span>.height + <span class="literal">'px'</span>;
    
    <span class="comment">// A copy of the background div is generate to solve problems like opacity inheritance and borders size</span>
    var propertyBoxHeader = document.createElement(<span class="literal">'div'</span>);
    propertyBoxHeader.id = <span class="reserved">this</span>.id + <span class="literal">'Header'</span>;
    propertyBoxHeader.className = <span class="literal">'property-box-header'</span>;
    propertyBoxHeader.innerHTML = <span class="reserved">this</span>.title;
    propertyBoxHeader.ondblclick = <span class="reserved">function</span>(){
        thisObject.setLeft(iniLeft);
        thisObject.setTop(iniTop);
        thisObject.setWidth(iniWidth);
        thisObject.setHeight(iniHeight);
		thisObject.onRestoreSize(thisObject);
    };
    propertyBox.appendChild(propertyBoxHeader);
    
    parent.appendChild(propertyBoxBg);
    parent.appendChild(propertyBox);
    
    var rt = new rootabs(<span class="reserved">this</span>.id + <span class="literal">"Tabs"</span>, {
        height: (propertyBox.offsetWidth - 10) + <span class="literal">'px'</span>,
        width: (propertyBox.offsetHeight - 40) + <span class="literal">'px'</span>
    })
    rt.appendTo(propertyBox);
    rt.onAdd = <span class="reserved">function</span>(newTab){
        rt.select(newTab.id);
    }
    
    <span class="comment">// Make the divs resizable.</span>
    $(<span class="literal">'#'</span> + <span class="reserved">this</span>.id).resizable({
        containment: <span class="literal">'#'</span> + parent.id,
		start: <span class="reserved">function</span>(event, ui){
			thisObject.onBeforeResize(document.getElementById(thisObject.id).offsetWidth, document.getElementById(thisObject.id).offsetHeight, thisObject)
		},
        resize: <span class="reserved">function</span>(event, ui){
            thisObject.setWidth(document.getElementById(thisObject.id).offsetWidth);
            thisObject.setHeight(document.getElementById(thisObject.id).offsetHeight);
			thisObject.onResize(document.getElementById(thisObject.id).offsetWidth, document.getElementById(thisObject.id).offsetHeight, thisObject);
        },
        stop: <span class="reserved">function</span>(event, ui){
            thisObject.setWidth(document.getElementById(thisObject.id).offsetWidth);
            thisObject.setHeight(document.getElementById(thisObject.id).offsetHeight);
			thisObject.onAfterResize(document.getElementById(thisObject.id).offsetWidth, document.getElementById(thisObject.id).offsetHeight, thisObject);
        },
        minWidth: 100,
        minHeight: 50,
        maxWidth: 1024,
        maxHeight: 768
    });
    
    <span class="comment">// Make the divs draggable.</span>
    $(<span class="literal">'#'</span> + <span class="reserved">this</span>.id).draggable({
        handle: <span class="literal">'#'</span> + <span class="reserved">this</span>.id + <span class="literal">'Header'</span>,
        containment: <span class="literal">'#'</span> + parent.id,
        drag: <span class="reserved">function</span>(event, ui){
            thisObject.setTop(document.getElementById(thisObject.id).offsetTop);
            thisObject.setLeft(document.getElementById(thisObject.id).offsetLeft);
			thisObject.onDrag(document.getElementById(thisObject.id).offsetTop, document.getElementById(thisObject.id).offsetLeft, thisObject);
        },
        stop: <span class="reserved">function</span>(event, ui){
            thisObject.setTop(document.getElementById(thisObject.id).offsetTop);
            thisObject.setLeft(document.getElementById(thisObject.id).offsetLeft);
			thisObject.onDrop(document.getElementById(thisObject.id).offsetTop, document.getElementById(thisObject.id).offsetLeft, thisObject);
        }
    });
    
	<span class="comment">/**
	 * Add tabs to the property box.
	 * <span class="attrib">@param</span> {String} title The title of the tab.
	 * <span class="attrib">@param</span> {Int} position The position where the tab is going to be inserted.
	 * <span class="attrib">@return</span> The id of the new tab. 
	 * <span class="attrib">@type</span> {String}
	 */</span>
	<span class="reserved">this</span>.addTab = <span class="reserved">function</span>(title, position){
        <span class="comment">// Adds a tab to the end of the tab panel.</span>
        <span class="comment">// TabArray is the array with the title of the tabs.	</span>
        <span class="reserved">if</span> (position == null) {
            position = 0;
        }
        
        <span class="reserved">if</span> (title == null) {
            title = <span class="literal">'myTab'</span>;
        }
        
        tabId = rt.add(title, position);
        
		<span class="reserved">this</span>.onAddTab(title, position, propertyBox);
		
        <span class="reserved">return</span> tabId;
    }
    
	<span class="comment">/**
	 * Removes a tab.
	 * <span class="attrib">@param</span> {Int} position The position of the tab to be removed.
	 */</span>
    <span class="reserved">this</span>.removeTab = <span class="reserved">function</span>(position){
        <span class="comment">//removes a tab from the tab panel.</span>
        <span class="comment">//position is the position of the tab you want to remove	</span>
		<span class="reserved">this</span>.onRemoveTab(position, <span class="reserved">this</span>);
			
        <span class="reserved">if</span> (position == null) {
            document.write(<span class="literal">'Error: propertyBox -&gt; removeTab : position is null.'</span>);
            <span class="reserved">return</span>;
        }
        
        var tabLength = rt.tabs.length;
        
        <span class="comment">//verifies if the number of the tab really exists</span>
        <span class="reserved">if</span> ((position &gt; 0) &amp;&amp; (position &lt; tabLength)) {
            <span class="comment">//removes the tab</span>
            rt.remove(position, 1);
        }
        <span class="reserved">else</span> {
            document.write(<span class="literal">'Error: propertyBox -&gt; removeTab : '</span> + position + <span class="literal">' is not a valid position.'</span>);
            <span class="reserved">return</span>;
        }
    }

	<span class="comment">/**
	 * Defines what is going to be done when you add a property.
	 * <span class="attrib">@param</span> {Int} tabId The id of the tab. Received when it was added. 
	 * <span class="attrib">@param</span> {Int} row The row in the table inside the tab where the content is going to be inserted.
	 * <span class="attrib">@param</span> {Int} cell The cell in the table inside the tab where the content is going to be inserted.
	 * <span class="attrib">@param</span> {String} property The property of the EO to be changed by this field.
	 * <span class="attrib">@param</span> {String} inputType The type of input to be inserted. Eg.: Text, Color, FontColor
	 * <span class="attrib">@param</span> {Object} EO The EO that is going to have its property changed.
	 * <span class="attrib">@param</span> {Object} properties The properties you may use depending on the type of field of your choice. 
	 */</span>		
	<span class="reserved">this</span>.addProperty = <span class="reserved">function</span>(tabId, row, cell, property, inputType, EO, properties){
        <span class="reserved">if</span> (tabId == null) {
            <span class="reserved">return</span>;
        }
		
		row = row ? row:0;
		cell = cell ? cell:0;
		
        <span class="comment">// Gets the table we want to change</span>
        tabId = String(tabId);
        tabIdNumber = parseInt(tabId.substring(rt.tabPrefix.length));
        var tabTableId = <span class="literal">'tabTable-'</span> + tabIdNumber;
        var tabTable = new table(tabTableId);
        tabTable.table.className = <span class="literal">'property-box-tab-table'</span>;
        tabTable.table.border = <span class="literal">'0'</span>;
		tabTable.table.align = <span class="literal">'left'</span>;
        var tabDiv = rt.getTabById(tabId).panel;
        <span class="reserved">if</span> (tabDiv != null) {
            <span class="reserved">if</span> (document.getElementById(tabTable.table.id) == null) {
                tabDiv.appendChild(tabTable.table);
            }
        }	
		
		properties.label = properties.label ? properties.label : <span class="literal">""</span>;
		properties.help = properties.help ? properties.help : <span class="literal">""</span>;
		properties.property = property;
		properties.EO = EO?EO: null;
		
		var arr = new window[<span class="literal">'input'</span> + inputType](properties);				 
		
		<span class="reserved">for</span> (var i =0; i &lt; arr.length; i++){
			tabTable.insertElement(
				row + arr[i].row, 
				cell + arr[i].cell, 
				arr[i].rowspan, 
				arr[i].colspan, 
				arr[i].content
			);	
		}
		
		<span class="reserved">this</span>.onAddProperty(tabId, row, cell, property, inputType, EO, properties, <span class="reserved">this</span>);
		
	}
    
	<span class="comment">/**
	 * Clears the content of a tab.
	 * <span class="attrib">@param</span> {String} tabId The id of the tab to be cleared.
	 */</span>
    <span class="reserved">this</span>.clearTabContent = <span class="reserved">function</span>(tabId){
        <span class="comment">//clears the content of the div that contains the tab content.</span>
        <span class="comment">//tabId is the id of the tab you want to clear. The number in the id, not the position.</span>
        <span class="reserved">if</span> (tabId == null) {
            document.write(<span class="literal">'Error: propertyBox -&gt; clearTabContent : tabId is null.'</span>);
            <span class="reserved">return</span>;
        }
        <span class="reserved">else</span> {
            var tabLength = rt.tabs.length;
            
            <span class="comment">//verifies if the number of the tab really exists</span>
            <span class="reserved">if</span> ((tabId &gt; 0) || (tabId &lt; tabLength)) {
                <span class="comment">//destroy the table inside the div</span>
                var tabDivId = <span class="literal">'tab-'</span> + tabId;
                var tabTableId = <span class="literal">'tabTable-'</span> + tabId;
                document.getElementById(tabDivId).removeChild(document.getElementById(tabTableId));
                
                <span class="comment">//the table inside the tab, where the DOM objects to change the objects properties are placed.</span>
                var tabTable = document.createElement(<span class="literal">'table'</span>);
                tabTable.id = <span class="literal">'tabTable-'</span> + tabId;
                tabTable.className = <span class="literal">'tabTable'</span>;
                tabTable.border = 0;
                
                <span class="comment">//appends the new table to the div								</span>
                document.getElementById(tabDivId).appendChild(tabTable);
            }
            <span class="reserved">else</span> {
                document.write(<span class="literal">'Error: propertyBox -&gt; clearTabContent : '</span> + tabId + <span class="literal">' is not a valid id for a tab.'</span>);
                <span class="reserved">return</span>;
            }
        }
		
		<span class="reserved">this</span>.onRemoveAllProperties(tabId, <span class="reserved">this</span>);		
    }
    
	<span class="comment">/**
	 * Removes all the tabs of the property box.
	 */</span>
    <span class="reserved">this</span>.removeAllTabs = <span class="reserved">function</span>(){
        <span class="comment">// Removes all the tabs </span>
        var lenTabs = rt.tabs.length;
        <span class="reserved">for</span> (var i = 0; i &lt; lenTabs; i++) {
            rt.remove(0, 1);
        }
    }
	
	<span class="comment">/**
	 * Sets the left property of the property box. 
	 * <span class="attrib">@param</span> {Int} left The left coordinate to be set.
	 */</span>
    <span class="reserved">this</span>.setLeft = <span class="reserved">function</span>(left){
        propertyBoxBg.style.left = left + <span class="literal">'px'</span>;
        <span class="reserved">if</span> (navigator.appName != <span class="literal">"Microsoft Internet Explorer"</span>) {
            propertyBox.style.left = left + parseInt(propertyBoxBg.style.borderLeftWidth) + <span class="literal">'px'</span>;
        }
        <span class="reserved">else</span> {
            propertyBox.style.left = left + <span class="literal">'px'</span>;
        }
        <span class="reserved">this</span>.left = left;
    }

	<span class="comment">/**
	 * Sets the top property of the property box
	 * <span class="attrib">@param</span> {Int} top The top coordinate to be set.
	 */</span>
    <span class="reserved">this</span>.setTop = <span class="reserved">function</span>(top){
        propertyBoxBg.style.top = top + <span class="literal">'px'</span>;
        <span class="reserved">if</span> (navigator.appName != <span class="literal">"Microsoft Internet Explorer"</span>) {
            propertyBox.style.top = top + parseInt(propertyBoxBg.style.borderTopWidth) + <span class="literal">'px'</span>;
        }
        <span class="reserved">else</span> {
            propertyBox.style.top = top + <span class="literal">'px'</span>;
        }
        <span class="reserved">this</span>.top = top;
    }
    
	<span class="comment">/**
	 * Sets the width of the property box.
	 * <span class="attrib">@param</span> {Int} width The width to be set.
	 */</span>
    <span class="reserved">this</span>.setWidth = <span class="reserved">function</span>(width){
        propertyBoxBg.style.width = width + <span class="literal">'px'</span>;
        propertyBox.style.width = width + <span class="literal">'px'</span>;
        rt.setWidth(width - 10);
        <span class="reserved">this</span>.width = width;
    }
    
	<span class="comment">/**
	 * Sets the height of the property box.
	 * <span class="attrib">@param</span> {Int} height The height to be set.
	 */</span>
    <span class="reserved">this</span>.setHeight = <span class="reserved">function</span>(height){
        propertyBoxBg.style.height = height + <span class="literal">'px'</span>;
        propertyBox.style.height = height + <span class="literal">'px'</span>;
        rt.setHeight(height - 20);
        <span class="reserved">this</span>.height = height;
    }
	
	<span class="comment">/**
	 * Sets the title of the property box. 
	 * <span class="attrib">@param</span> {String} title The new title to be set.
	 */</span>
	<span class="reserved">this</span>.setTitle = <span class="reserved">function</span>(title){
		propertyBoxHeader.innerHTML = title;
		<span class="reserved">this</span>.title = title;
	}
	
	<span class="comment">/**
	 * Changes a property of the property box to some value
	 * <span class="attrib">@param</span> {String} propertyName The name of the property to be changed.
	 * <span class="attrib">@param</span> {Any} value The value to be set to the property.
	 */</span>	
	<span class="reserved">this</span>.setProperty = <span class="reserved">function</span>(propertyName, value){
		switch(propertyName){
			case <span class="literal">'height'</span>:
				<span class="reserved">this</span>.setHeight(value);
				break;
			
			case <span class="literal">'width'</span>:
				<span class="reserved">this</span>.setWidth(value);
				break;
				
			case <span class="literal">'top'</span>:
				<span class="reserved">this</span>.setTop(value);
				break;
			
			case <span class="literal">'left'</span>:
				<span class="reserved">this</span>.setLeft(value);
				break;
			
			case <span class="literal">'title'</span>:
				<span class="reserved">this</span>.setTitle(value);
				break;
				
			case <span class="literal">'cssPath'</span>:
				<span class="reserved">this</span>.setCSS(value);
				break;
			
			default:
				document.write(<span class="literal">'Property not found'</span>);
				break;
		}
	}
	
    <span class="reserved">this</span>.setLeft(<span class="reserved">this</span>.left);
    <span class="reserved">this</span>.setTop(<span class="reserved">this</span>.top);
    <span class="reserved">this</span>.setWidth(<span class="reserved">this</span>.width);
    <span class="reserved">this</span>.setHeight(<span class="reserved">this</span>.height);
	
	<span class="comment">/**
	 * Removes this property box.
	 */</span>	
	<span class="reserved">this</span>.remove = <span class="reserved">function</span>(){
		propertyBox.parentNode.removeChild(propertyBox);
		propertyBoxBg.parentNode.removeChild(propertyBoxBg);
		propertyBoxHeader.parentNode.removeChild(propertyBoxHeader);
		delete propertyBox;
		delete propertyBoxBg;
		delete propertyBoxHeader;
		<span class="reserved">this</span>.onRemove();
	}
	
	<span class="comment">/**
	 * Sets a new CSS stylesheet to the property box.
	 * <span class="attrib">@param</span> {String} path The relative path of the CSS stylesheet file from the APP_HOME folder.
	 */</span>	
	<span class="reserved">this</span>.setCSS = <span class="reserved">function</span>(path){
		<span class="reserved">this</span>.workspace.setCSS(<span class="reserved">this</span>, path);
	}
	<span class="reserved">this</span>.setCSS(<span class="reserved">this</span>.cssPath);
}
</pre>
	<hr>



<!-- ========== START OF NAVBAR ========== -->
<a name="navbar_top"><!-- --></a>
<table border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td colspan=2 bgcolor="#EEEEFF" class="NavBarCell1">
<a name="navbar_top_firstrow"><!-- --></a>
<table border="0" cellpadding="0" cellspacing="3">
  <tr align="center" valign="top">
  
  
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-summary.html"><font class="NavBarFont1"><b>Overview</b></font></a>&nbsp;</td>
  <td bgcolor="#FFFFFF" class="NavBarCell1Rev">	&nbsp;<font class="NavBarFont1Rev"><b>File</b></font>&nbsp;</td>
  

  <td bgcolor="#FFFFFF" class="NavBarCell1"> <font class="NavBarFont1">Class</font>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-tree.html"><font class="NavBarFont1"><b>Tree</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="index-all.html"--><font class="NavBarFont1"><b>Index</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="help-doc.html"><font class="NavBarFont1"><b>Help</b></font></a>&nbsp;</td>
  </tr>
</table>
</td>
<td bgcolor="#EEEEFF" align="right" valign="top"><em>
<b></b></em>
</td>
</tr>

<tr>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
&nbsp;PREV&nbsp;
&nbsp;NEXT</font></td>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
  <a href="index.html" target="_top"><b>FRAMES</b></a>  &nbsp;
&nbsp;<a href="overview-summary.html" target="_top"><b>NO FRAMES</b></a>
&nbsp;&nbsp;
<script>
  <!--
  if(window==top) {
    document.writeln('<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>');
  }
  //-->
</script>
<noscript>
<a href="allclasses-noframe.html" target=""><b>All Classes</b></a>
</noscript>
</font></td>
</tr>
</table>
<!-- =========== END OF NAVBAR =========== -->

<hr>
<font size="-1">

</font>
<div class="jsdoc_ctime">Documentation generated by <a href="http://jsdoc.sourceforge.net/" target="_parent">JSDoc</a> on Mon Feb 21 18:12:28 2011</div>
</body>
</html>
